import React from 'react';
import './index.css';

const EXP = {
    plus:0,
    minus:1,
    multiply:2,
    divide:3,
};

const CTRL = {
    reset:0,
    revert:1,
    precent:2,
}
export default class Calc extends React.Component {

    state = {
        number1:'0',
        exp:null, 
        number2:'0',
    };

    onNumberClick = value => {}
    onNumberClick =(crtl)=>{
        switch(crtl){
            case CTRL.reset:
                this.setState({number:0});
                break;
            case CTRL.revert:
                number1=String(-Number(number1));
                this.setState({number:number1});
            case CTRL.precent:
                number1=String({number1});
                break;
                default;
                
                
        }
    }

    onNumberChange = value =>{

        const{ number1:prevNumber}=this.state;

        if(/\./.test(prevNumber) && value === '.'){
            return;
        } 

        let number1 = prevNumber+ value;
        if(/^0/.test(number1)){
            number1 = number1.replace(/^0/,'');
        }
        
        this.setState({number1});
          

           
    }

    render() {
        const {number1,number2,exp} = this.state;

        return (
        <div className="calc">
            <div className="calc-screen">0.09</div>
            <button className="ctrl">C</button>
            <button className="ctrl">+/-</button>
            <button className="ctrl">%</button>
            <button className="exp">÷</button>
            <button onClick={() => this.onNumberChange(7)}>7</button>
            <button onClick={() => this.onNumberChange(7)}>8</button>
            <button onClick={() => this.onNumberChange(7)}>9</button>
            <button>×</button>
            <button onClick={() => this.onNumberChange(7)}>4</button>
            <button onClick={() => this.onNumberChange(7)}>5</button>
            <button onClick={() => this.onNumberChange(7)}>6</button>
            <button>-</button>
            <button onClick={() => this.onNumberChange(7)}>1</button>
            <button onClick={() => this.onNumberChange(7)}>2</button>
            <button onClick={() => this.onNumberChange(7)}>3</button>
            <button >+</button>
            <button onClick={() => this.onNumberChange(7)}>0</button>
            <button>.</button>
            <button>=</button>
        </div>)
    }
}